<template>
  <div class="topnav-content">
<!--    <Col span="3">-->
      <DatePicker
        type="daterange"
        v-model="selectTime"
        :options="dateOptions"
        placement="bottom-end"
        separator="->"
        :placeholder="placeholder"
        @on-change="change"
        style="width: 100%">
       </DatePicker>
<!--    </Col>-->
  </div>
</template>
<script>
export default {
  name: 'Date2Picker',
  props: {
    selectValue: { type: Array, default: () => [] },
    placeholder: { type: String, default: () => { '日期选择' } }
  },
  watch: {
    selectValue (val) {
      if (!!val && val.length === 2) {
        this.selectTime = val
      }
    }
  },
  // v-model
  model: {
    prop: 'selectValue',
    event: 'dataChange'
  },
  data () {
    return {
      selectTime: [],
      dateOptions: {
        shortcuts: [
          {
            text: '今日',
            value () {
              const end = new Date()
              const start = new Date()
              return [start, end]
            }
          },
          {
            text: '昨日',
            value () {
              const end = new Date()
              const start = new Date()
              end.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              return [start, end]
            }
          },
          {
            text: '前日',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
              return [start, end]
            }
          },
          {
            text: '一周',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            }
          },
          {
            text: '一月',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            }
          },
          {
            text: '三月',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              return [start, end]
            }
          },
          {
            text: '一年',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
              return [start, end]
            }
          }
        ]
      }
    }
  },
  methods: {
    change () {
      // console.log("Date2Select.change: selectTime=%o",this.selectTime);
      let result = null
      if (this.selectTime[0] != '') {
        this.selectTime[0].setHours(0)
        this.selectTime[0].setMinutes(0)
        this.selectTime[0].setSeconds(0)
        this.selectTime[0].setMilliseconds(0)

        this.selectTime[1].setHours(23)
        this.selectTime[1].setMinutes(59)
        this.selectTime[1].setSeconds(59)
        this.selectTime[1].setMilliseconds(999)
        result = this.selectTime
      }
      this.$emit('dataChange', this.selectTime)
    },
    getDateRange () {
      let result = null
      // console.log(">>>>>>>> Date2Select.getDateRange: selectTime=%o",this.selectTime);
      if (this.selectTime.length>0) {
        if (this.selectTime[0] != '') {
          this.selectTime[0].setHours(0)
          this.selectTime[0].setMinutes(0)
          this.selectTime[0].setSeconds(0)
          this.selectTime[0].setMilliseconds(0)

          this.selectTime[1].setHours(23)
          this.selectTime[1].setMinutes(59)
          this.selectTime[1].setSeconds(59)
          this.selectTime[1].setMilliseconds(999)
          result = this.selectTime
        }
      }

      return result
    },
    startTime (sdate) {
      sdate.setHours(0)
      sdate.setMinutes(0)
      sdate.setSeconds(0)
      sdate.setMilliseconds(0)
      return sdate
    },
    endTime (edate) {
      edate.setHours(23)
      edate.setMinutes(59)
      edate.setSeconds(59)
      edate.setMilliseconds(999)
      return edate
    }
  }
}
</script>
<style>
.topnav-content {
  height: 100%;
  width: 100%;
}
.topnav-content  .panel-count {
  margin-bottom: 10px;
  margin-top: 10px;
}
.topnav-content .panel-count .count-number {
  font-size: 30px;
  color: #ed4014;
}
.topnav-content .panel-page {
    margin-top: 10px;
}
.topnav-content .panel-nav {
  margin-bottom: 10px;
  a {
    margin-right: 10px;
  }

}


</style>
